<template>
  <div class="app-container">
    <el-row>
      <el-col :span="12">
        <el-container style="height: 500px">
          <el-header>
            <el-input
              v-model="filterText"
              placeholder="输入关键字进行过滤"
            />
          </el-header>
          <el-main>
            <el-tree
              ref="treeDep"
              :data="departmentOption"
              show-checkbox
              node-key="id"
              :props="defaultProps"
              :filter-node-method="filterNodeDep"
              :default-checked-keys="defaultCheckedDep"
              :default-expanded-keys="defaultExpandedDep"
              @check="checkDataDep"
            />
          </el-main>
        </el-container>
      </el-col>
      <el-col :span="11" :offset="1">
        <el-container style="height: 500px">
          <el-header style="height: 40px;line-height: 40px;">
            <span>选中人员</span>
          </el-header>
          <el-main>
            <div class="box-card">
              <el-tag
                v-for="(o,index) in checkNameDep"
                :key="index"
              >
                {{ o.name }}
              </el-tag>
              <span v-if="checkNameDep.length == 0">请选择</span>
            </div>

          </el-main>

        </el-container>

      </el-col>

    </el-row>
  </div>
</template>

<script>
export default {

  data() {
    return {
      filterText: '',
      departmentOption: [
      ],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      checkNameDep: [],
      defaultCheckedDep: [],
      defaultExpandedDep: []
    }
  },
  watch: {
    filterText(val) {
      this.$refs.treeDep.filter(val)
    }
  },
  created() {
    this.getDepTree()
  },

  methods: {
    getDepTree() {
      this.departmentOption = [
        {
          'id': 1,
          'createdTime': '2019-08-14T05:30:49.000+0000',
          'createdBy': 1,
          'lastModifiedTime': '2019-08-14T05:30:49.000+0000',
          'lastModifiedBy': 1,
          'name': '饿了么',
          'parentId': 0,
          'sortIndex': 2,
          'type': 'org',
          'children': [
            {
              'id': 11,
              'createdTime': '2019-08-14T05:30:49.000+0000',
              'createdBy': 1,
              'lastModifiedTime': '2019-08-14T05:30:49.000+0000',
              'lastModifiedBy': 1,
              'name': '北京总部',
              'parentId': 1,
              'sortIndex': 2,
              'type': 'org',
              'children': [
                {
                  'id': 111,
                  'createdTime': '2019-08-14T05:30:49.000+0000',
                  'createdBy': 1,
                  'lastModifiedTime': '2019-08-14T05:30:49.000+0000',
                  'lastModifiedBy': 1,
                  'name': '开发组',
                  'parentId': 11,
                  'sortIndex': 4,
                  'type': 'org'
                },
                {
                  'id': 112,
                  'createdTime': '2019-08-14T05:30:49.000+0000',
                  'createdBy': 1,
                  'lastModifiedTime': '2019-08-14T05:30:49.000+0000',
                  'lastModifiedBy': 1,
                  'name': '测试组',
                  'parentId': 11,
                  'sortIndex': 5,
                  'type': 'org',
                  'children': [
                    {
                      'id': 1111,
                      'createdTime': '2019-08-14T05:30:49.000+0000',
                      'createdBy': 1,
                      'lastModifiedTime': '2019-08-14T05:30:49.000+0000',
                      'lastModifiedBy': 1,
                      'name': '李荣浩',
                      'parentId': 112,
                      'sortIndex': 5,
                      'type': 'user'
                    }
                  ]

                }
              ]
            },
            {
              'id': 12,
              'createdTime': '2019-08-14T05:30:49.000+0000',
              'createdBy': 1,
              'lastModifiedTime': '2019-08-14T05:30:49.000+0000',
              'lastModifiedBy': 1,
              'name': '成都分部',
              'parentId': 1,
              'sortIndex': 2,
              'type': 'org',
              'children': [
                {
                  'id': 121,
                  'createdTime': '2019-08-14T05:30:49.000+0000',
                  'createdBy': 1,
                  'lastModifiedTime': '2019-08-14T05:30:49.000+0000',
                  'lastModifiedBy': 1,
                  'name': '测试组',
                  'parentId': 11,
                  'sortIndex': 5,
                  'type': 'org'
                },
                {
                  'id': 122,
                  'createdTime': '2019-08-14T05:30:49.000+0000',
                  'createdBy': 1,
                  'lastModifiedTime': '2019-08-14T05:30:49.000+0000',
                  'lastModifiedBy': 1,
                  'name': '测试部',
                  'parentId': 12,
                  'sortIndex': 2,
                  'type': 'org'
                },
                {
                  'id': 123,
                  'createdTime': '2019-08-14T05:30:49.000+0000',
                  'createdBy': 1,
                  'lastModifiedTime': '2019-08-14T05:30:49.000+0000',
                  'lastModifiedBy': 1,
                  'name': '公关部',
                  'parentId': 12,
                  'sortIndex': 2,
                  'type': 'org',
                  'children': [
                    {
                      'id': 1211,
                      'createdTime': '2019-08-14T05:30:49.000+0000',
                      'createdBy': 1,
                      'lastModifiedTime': '2019-08-14T05:30:49.000+0000',
                      'lastModifiedBy': 1,
                      'name': 'Jay',
                      'parentId': 123,
                      'sortIndex': 2,
                      'type': 'user'
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
      // 默认选中 Jay
      this.defaultCheckedDep = [1211]
      this.defaultExpandedDep = [1211]
    },
    filterNodeDep(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    checkDataDep() {
      // getCheckedNodes 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false
      this.checkNameDep = this.$refs.treeDep.getCheckedNodes(true, false)
      // console.log(this.checkNameDep)
    }
  }
}
</script>

<style scoped>
  .el-tag {
    margin-right: 10px;
    margin-bottom: 10px;
  }
</style>

